<template>
  <page-header-wrapper :title="false">
    <a-card title="资源列表">
      <div class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="queryParam"
        >
          <a-row :gutter="15">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="联系电话">
                <a-input v-model="queryParam['filter[phone]']"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-model-item label="业务名称">
                <a-input v-model="queryParam['filter[b_name]']"/>
              </a-form-model-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="6" :sm="24">
                <a-form-item label="入库时间">
                  <a-range-picker @change="onTime1" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="领取时间">
                  <a-range-picker @change="onTime2" />
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="业务分类">
                  <a-select v-model="queryParam['filter[first_type]']" :default-value="0">
                    <a-select-option v-for="(item,index) in firstTypeOpts" :key="index" :value="index">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="搜索引擎">
                  <a-input v-model="queryParam['filter[search_engine]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="首次页面">
                  <a-input v-model="queryParam['filter[first_url]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="领取状态">
                  <a-select v-model="queryParam['filter[receive_status]']" :default-value="0">
                    <a-select-option v-for="(item,index) in receiveStatusOpts" :key="index" :value="index">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="按搜索词">
                  <a-input v-model="queryParam['filter[search_keywords]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="领取顾问">
                  <a-input v-model="queryParam['filter[receiver_info]']"/>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-item label="搜索的IP">
                  <a-input v-model="queryParam['filter[ip]']"/>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="放弃状态">
                  <a-select v-model="queryParam['filter[is_abandon]']" :default-value="0">
                    <a-select-option v-for="(item,index) in abandonStatusOpts" :key="index" :value="index">
                      {{item}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="24">
                <a-form-model-item label="客户状态">
                  <a-select v-model="queryParam['filter[customer_status]']" :default-value="0">
                    <a-select-option v-for="item in customerStatusOpts" :key="item.id" :value="item.id">
                      {{item.title}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                  <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
                  <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                  <a @click="toggleAdvanced" style="margin-left: 8px">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <a-button :disabled="selectedRowKeys.length == 0" type="danger" @click="onDelete(selectedRowKeys)">批量删除</a-button>
      <a-button style="margin-left: 8px" :disabled="selectedRowKeys.length == 0" type="danger" @click="batchTransfer(selectedRowKeys)">批量转移</a-button>
      <a-button style="margin-left: 8px" type='primary' @click='exportData'>导出</a-button>
      <p></p>
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.customer_id"
        :columns="customerColumns"
        :row-selection="rowSelection"
        :data="customerData"
      >
        <template slot='ip' slot-scope='text,record'>
          {{record.device}}<br>{{text}}<br>{{record.ip_format}}
        </template>
        <template slot="search_keywords" slot-scope="text,record">
          <a-button size="small" type="link" icon="edit" @click="onEdit(record.customer_id)">{{text}}</a-button>
          <div>{{record.search_engine}}</div>
        </template>
        <template slot='first_url' slot-scope='text'>
          <a :href='text' target='_blank'>{{text}}</a>
        </template>
        <template slot="scrr_username" slot-scope="text,record">
          {{text}}<br>
          {{record.first_received_at}}
        </template>
        <template slot='action' slot-scope='text,record'>
          <a-button type='primary' size='small' style="margin-right:5px" :disabled="record.transfer == 0" @click="onTransfer(record.customer_id)">转移</a-button>
          <a-button type='danger' size='small' @click="onDelete(record.customer_id)">删除</a-button>
        </template>
      </s-table>
    </a-card>
    <a-modal
      title="指派数据"
      v-model="visible"
      :width="500"
      :confirm-loading="loading"
      @ok="onSubmitTransfer"
    >
      <a-alert
        message="警告"
        description="所转移的信息将直接进入目标库"
        type="warning"
        show-icon
      />
      <p></p>
      <a-select
        show-search
        v-model="transferForm['transfer[to_company]']"
        :filter-option="filterOption"
        style="width: 100%"
        placeholder="请选择要转移的公司"
      >
        <a-select-option v-for="(item,index) in companyOpts" :key="index" :value="index">{{item}}</a-select-option>
      </a-select>
    </a-modal>
    <a-modal
      title="更改客户状态"
      v-model="statusVisible"
      :width="300"
      @ok="onSubmit"
    >
      <a-form-model
        ref="statusForm"
        :model="statusForm"
      >
        <a-form-model-item label="选择客户状态">
          <a-select v-model="statusForm.customer_status" placeholder="请选择客户状态">
            <a-select-option v-for="item in statusOpts" :key="item.id" :value="item.id">{{item.title}}</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="修改搜索词"
      v-model="visible2"
      :width="400"
      @ok="onSubmitKeyword"
    >
      <a-form-model
        ref="keywordForm"
        :model="keywordForm"
        :rules="keywordRules"
      >
        <a-form-model-item prop="search_keywords">
          <a-input v-model="keywordForm.search_keywords" type="text" placeholder="请输入要修改的关键词"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import storage from 'store'
import { COMPANY, ACCESS_TOKEN } from '@/store/mutation-types'
import { STable } from '@/components'
import col from '@/columns/customer'
import apis from '@/api'
import {
  allList,
  delList,
  getEdit,
  getEditSearch,
  getTransfer,
  postEdit,
  postEditSearch,
  postTransfer
} from '@/api/customer'
export default {
  components: {
    STable
  },
  name: 'CustomerList',
  data () {
    return {
      customerColumns: col.all_list,
      customerData: parameters => {
        return allList(Object.assign(parameters, this.queryParam)).then(res => {
          this.customerStatusOpts = res.result.customer_status_opts
          this.abandonStatusOpts = res.result.is_abandon_opts
          this.receiveStatusOpts = res.result.receive_status_opts
          this.firstTypeOpts = res.result.first_type_opts
          return res.result
        })
      },
      queryParam: {},
      loading: false,
      advanced: true,
      customerStatusOpts: {},
      abandonStatusOpts: {},
      receiveStatusOpts: {},
      firstTypeOpts: {},
      selectedRowKeys: [],
      exportUrl: apis.ExportData,
      exportParams: '',
      company: storage.get(COMPANY),
      acesstoken: storage.get(ACCESS_TOKEN),
      transferForm: {},
      ids: [],
      visible: false,
      companyOpts: {},
      statusVisible: false,
      visible2: false,
      statusForm: {},
      statusOpts: {},
      keywordForm: {},
      keywordRules: {
        search_keywords: []
      }
    }
  },
  methods: {
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    onTime1 (date, dateString) {
      this.queryParam['filter[created_at_start]'] = dateString[0]
      this.queryParam['filter[created_at_end]'] = dateString[1]
    },
    onTime2 (date, dateString) {
      this.queryParam['filter[received_at_start]'] = dateString[0]
      this.queryParam['filter[received_at_end]'] = dateString[1]
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onDelete (ids) {
      const app = this
      app.$confirm({
        title: '确定删除数据吗',
        onOk: () => {
          const parameter = {}
          parameter['ids'] = ids
          delList(parameter).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh(true)
            } else {
              this.$warning({
                title: res.msg
              })
            }
          })
        }
      })
    },
    onEdit (id) {
      const app = this
      app.keywordForm['customer_id'] = id
      getEditSearch(id).then(res => {
        app.keywordForm['search_keywords'] = res.result.search_keywords
        app.visible2 = true
      })
    },
    resetForm () {
      // this.reload()
      const app = this
      app.queryParam = {}
      app.$refs.table.refresh(true)
    },
    exportData () {
      const app = this
      for (const k in app.queryParam) {
        app.exportParams = app.exportParams + ('&' + k + '=' + app.queryParam[k])
      }
      app.exportUrl = app.exportUrl + '?access_token=' + app.acesstoken + '&company=' + app.company + app.exportParams
      app.$confirm({
        title: '是否导出所筛选的数据',
        onOk: () => {
          window.open(process.env.VUE_APP_API_BASE_URL + app.exportUrl)
        }
      })
    },
    batchTransfer (ids) {
      const app = this
      app.ids = ids
      console.log(app.ids)
      getTransfer().then(res => {
        if (res.status === 0) {
          app.companyOpts = res.result.companies
          app.visible = true
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onTransfer (id) {
      const app = this
      this.ids[0] = id
      getTransfer().then(res => {
        if (res.status === 0) {
          app.companyOpts = res.result.companies
          app.visible = true
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onSubmitTransfer () {
      const app = this
      app.transferForm['transfer[customer_ids]'] = app.ids
      postTransfer(app.transferForm).then(res => {
        if (res.status === 0) {
          app.visible = false
          app.$refs.table.refresh(true)
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onSubmit () {
      const app = this
      postEdit(app.statusForm.id, app.statusForm).then(res => {
        if (res.status === 0) {
          app.statusVisible = false
          app.$refs.table.refresh()
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    getStatus (id) {
      const app = this
      app.statusForm = {}
      app.statusForm['id'] = id
      getEdit(id).then(res => {
        if (res.status === 0) {
          app.statusOpts = res.result.customer_status_opts
          app.statusVisible = true
        }
      })
    },
    onSubmitKeyword () {
      const app = this
      app.$refs.keywordForm.validate(valid => {
        if (valid) {
          postEditSearch(app.keywordForm['customer_id'], app.keywordForm).then(res => {
            if (res.status === 0) {
              app.$refs.table.refresh()
              app.visible2 = false
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  },
  computed: {
    rowSelection () {
      return {
        onChange: this.onSelectChange,
        getCheckboxProps: record => ({
          props: {
            disabled: record.transfer === 0, // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
